<template>
  <div class="home">
    <div class="homeheader">
      <i class="iconfont icon-VIVO"></i>
    </div>
    <div class="official">
      <img src="/static/img/official.png" alt="图片" style="width: 100%;height:100%">
    </div>
    <home-swipe></home-swipe>
    <home-list></home-list>
    <home-container :todos="todos"></home-container>
    <home-footer></home-footer>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import { Swipe, SwipeItem } from "mint-ui";
import HomeSwipe from "./component/HomeSwipe";
import HomeList from "./component/HomeList";
import HomeContainer from "./component/HomeContainer";
import HomeFooter from "../../pages/footer";
import axios from "axios";
export default {
  name: "Home",
  data: function() {
    return {
      todos: []
    };
  },
  components: {
    HomeSwipe,HomeList,HomeContainer,HomeFooter
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    getData: function() {
      var _this = this;
      axios.get("/static/ceshi.json").then(function(res) {
        console.log(res);
        _this.todos = res.data.data.home;
      });
    }
  }
};
</script>

<style lang="stylus">
.home
  border-bottom: 10px;

  .homeheader
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
    height: 1.3rem;
    line-height: 1.3rem;
    font-size: 0.35rem;
    padding-left: 0.3rem;
    background: white;

    i 
      font-size: 0.55rem;

  .official 
    width: 100%;
    height: 0.8rem;
    background: white;
    margin-top: 1.33rem;

  .swipe
    height: 6.5rem;
    margin-top: 1px;

    img 
      width: 100%;
      height: 6.5rem;
</style>
